#{extends '/templates/admin/admin-index.html'/}

#{set title:'功能列表' /}
#{set 'moreScripts'}
<script src="/tts/public/admin/sys/menu.js"></script>
#{/set}
<div id="app">

<!-- 数据列表 -->
    <h2 class="alert alert-danger text-center" v-show="errorShow">{{"系统提示："+errorMsg}}</h2>
    <div v-show="showList">
        <div class="panel panel-primary">
            <div class="panel-heading">
                <h3 class="panel-title">查询</h3>
            </div>
            <div class="panel-body">
                <div class="form-horizontal">
                    <div class="form-group">
                        <label for="name" class="col-sm-1 control-label">菜单名称</label>
                        <div class="col-sm-4">
                            <input type="text" class="form-control" id="name" placeholder="角色名称" v-model="q.name">
                        </div>
                        <label for="url" class="col-sm-1 control-label">菜单URL</label>
                        <div class="col-sm-4">
                            <input type="text" class="form-control" id="url" placeholder="菜单URL" v-model="q.url">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="type" class="col-sm-1 control-label">类型</label>
                        <div class="col-sm-4">
                            <select class="form-control"  id="type" data-placeholder="请选择类型" style="width: 100%;" tabindex="-1" aria-hidden="true" v-model="q.type">
                                <option value="">全部</option>
                                <option value="FOLDER">目录</option>
                                <option value="MENU">菜单</option>
                                <option value="BUTTON">按钮</option>
                            </select>
                        </div>
                        <label for="status" class="col-sm-1 control-label">状态</label>
                        <div class="col-sm-4">
                            <select class="form-control"  id="status" data-placeholder="请选择状态" style="width: 100%;" tabindex="-1" aria-hidden="true" v-model="q.status">
                                <option value="">全部</option>
                                <option value="INVALID">禁用</option>
                                <option value="VALID">启用</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-sm-12 text-center">
                            <a class="btn btn-success btn-lg " @click="search">查询</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="grid-btn">
            <a class="btn btn-primary" @click="add"><i class="fa fa-plus"></i>&nbsp;新增</a>
            <a class="btn btn-primary" @click="update"><i class="fa fa-pencil-square-o"></i>&nbsp;修改</a>
            <a class="btn btn-primary" @click="invalid"><i class="fa fa-trash-o"></i>&nbsp;禁用</a>
            <a class="btn btn-primary" @click="valid"><i class="fa fa-bookmark-o"></i>&nbsp;启用</a>
        </div>
        <table id="jqGrid"></table>
        <div id="jqGridPager"></div>
    </div>

<!-- 新增表单 -->
    <div v-show="!showList" class="panel panel-default">
        <div class="panel-heading">{{title}}</div>
        <form class="form-horizontal">
            <div class="form-group">
                <div class="col-sm-2 control-label">类型</div>
                <label class="radio-inline">
                    <input type="radio" name="type" value="FOLDER" v-model="menu.type"/> 目录
                </label>
                <label class="radio-inline">
                    <input type="radio" name="type" value="MENU" v-model="menu.type"/> 菜单
                </label>
                <label class="radio-inline">
                    <input type="radio" name="type" value="BUTTON" v-model="menu.type"/> 按钮
                </label>
            </div>
            <div class="form-group">
                <div class="col-sm-2 control-label">菜单名称</div>
                <div class="col-sm-10">
                    <input type="text" class="form-control" v-model="menu.name" placeholder="菜单名称或按钮名称"/>
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-2 control-label">上级菜单</div>
                <div class="col-sm-10">
                    <input type="text" class="form-control" style="cursor:pointer;" v-model="menu.parentName" @click="menuTree" readonly="readonly" placeholder="一级菜单"/>
                </div>
            </div>
            <div v-if="menu.type == 'MENU'" class="form-group">
                <div class="col-sm-2 control-label">菜单URL</div>
                <div class="col-sm-10">
                    <input type="text" class="form-control" v-model="menu.url" placeholder="菜单URL"/>
                </div>
            </div>
            <div v-if="menu.type == 'MENU' || menu.type == 'BUTTON'" class="form-group">
                <div class="col-sm-2 control-label">授权标识</div>
                <div class="col-sm-10">
                    <input type="text" class="form-control" v-model="menu.perms" placeholder="多个用逗号分隔，如：user:list,user:create"/>
                </div>
            </div>
            <div v-if="menu.type != 'BUTTON'" class="form-group">
                <div class="col-sm-2 control-label">排序号</div>
                <div class="col-sm-10">
                    <input type="number" class="form-control" v-model="menu.orderNum" placeholder="排序号"/>
                </div>
            </div>
            <div v-if="menu.type != 'BUTTON'" class="form-group">
                <div class="col-sm-2 control-label">图标</div>
                <div class="col-sm-10">
                    <input type="text" class="form-control" v-model="menu.icon" placeholder="菜单图标"/>
                    <code style="margin-top:4px;display: block;">获取图标：http://fontawesome.io/icons/</code>
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-2 control-label"></div>
                <input type="button" class="btn btn-primary" @click="saveOrUpdate" value="确定"/>
                &nbsp;&nbsp;<input type="button" class="btn btn-warning" @click="reload" value="返回"/>
            </div>
        </form>
    </div>

</div>

<!-- 选择菜单 -->
<div id="menuLayer" style="display: none;padding:10px;">
    <ul id="menuTree" class="ztree"></ul>
</div>

